<template>
  <div class="container">
    <van-grid
      :column-num="3"
      :border="false"
    >
      <van-grid-item
        v-for="(item, index) in channels"
        :key="index"
        :icon="item.icon"
        :text="item.name"
        @click="pushNativelink(item.mplink)"
      />
    </van-grid>
    <div class="information-title">最新资讯</div>
    <div>
      <recommend
        v-if="list.length"
        key="recommend"
        :list="list"
      />
    </div>
  </div>
</template>

<script>
import Recommend from '@/components/home/recommend'
import { getNewsCenterApi, getNewestApi } from '@/api'
export default {
  components: {
    Recommend
  },
  data () {
    return {
      channels: [],
      list: []
    }
  },
  onLoad () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {
      getNewsCenterApi().then(res => {
        const {channels} = res
        this.channels = channels
      })
      getNewestApi().then(res => {
        const {items} = res
        if (items) {
          this.list = items
        }
      })
    }
  }
}
</script>

<style lang="less">
.container {
  background: #f7f7fa;
}
.information-title {
  font-size: 16px;
  color: #333;
  font-weight: 800;
  padding: 10px 15px;
}
</style>
